<template>
	<view class="uni-data-pickerview">
		<scroll-view class="selected-area" scroll-x="true" scroll-y="false" :show-scrollbar="false">
			<view class="selected-list">
				<template v-for="(item,index) in selected">
					<view class="selected-item"
						:class="{'selected-item-active':index==selectedIndex, 'selected-item-text-overflow': ellipsis}"
						:key="index" v-if="item.text" @click="handleSelect(item,index)">
						<text class="">{{item.text}}</text>
					</view>
				</template>
			</view>
		</scroll-view>
		<view class="tab-c">
			<template>
				<scroll-view class="list" :scroll-y="true">
					<view class="item" v-for="(item, index) in acList" :key="index"
						@click="handleNodeClick(item, index)">
						<text class="item-text item-text-overflow">{{item.text}}</text>
						<view class="check"
							v-if="selected && selected.length && selected[selected.length && selected.length-1].value == item.value">
						</view>
					</view>
				</scroll-view>
			</template>
			<view class="error-message" v-if="errorMessage">
				<text class="error-text">{{errorMessage}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getToken,
		setToken
	} from '@/utils/token.js';
	import dataPicker from "./uni-data-picker.js";
	import {
		getPortalType,
		getPortalDistrict
	} from '@/common/api/common.js';
	export default {
		name: 'UniDataPickerView',
		emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'],
		mixins: [dataPicker],
		props: {
			managedMode: {
				type: Boolean,
				default: false
			},
			ellipsis: {
				type: Boolean,
				default: true
			},
			currData: {
				type: Object,
				default () {
					return {}
				}
			},
			currDataCity: {
				type: Object,
				default () {
					return {}
				}
			},
			seltype: {
				type: String,
				default: ''
			},
			seltId: {
				type: String,
				default: ''
			},
			localdata: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				dataList: {},
				acList: [],
				acPid: '-1',
				selectedIndex: 0,
				selected: [],
				showData: false
			}
		},
		created() {
			if (this.localdata && this.localdata.length) {
				//console.log(666)
				this.acList = this.localdata;
				this.showData = true;
			}
			if (this.seltype == 'hy') {
				if (this.currData && this.currData.acList && this.currData.acList.length) {
					setTimeout(() => {
						this.dataList = this.currData.dataList,
							this.acList = this.currData.acList,
							this.acPid = this.currData.acPid,
							this.selectedIndex = this.currData.selectedIndex,
							this.selected = this.currData.selected
					}, 100)
					//console.log(this.selected,888888)
				} else {
					// this.getPortalType(-1);
					console.log('aaaaaaaaaaaaaa', getToken('chainTypeId'), this.chainTypeId);
					if (this.seltId)
						this.getPortalType(this.seltId);
					else
						this.getPortalType(getToken('chainTypeId') ? getToken('chainTypeId') : this.chainTypeId);
				}
			} else if (this.seltype == 'city') {
				//console.log(this.currDataCity,'currDataCity')
				if (this.currDataCity && this.currDataCity.acList && this.currDataCity.acList.length) {
					setTimeout(() => {
						this.dataList = this.currDataCity.dataList,
							this.acList = this.currDataCity.acList,
							this.acPid = this.currDataCity.acPid,
							this.selectedIndex = this.currDataCity.selectedIndex,
							this.selected = this.currDataCity.selected
					}, 100)
				} else {
					console.log('bbbbbbbbbbbbbbbbbbb');
					this.getPortalType(0);
				}
			}
		},
		methods: {
			getPortalType(id) {
				if (this.seltype == 'hy') {
					return getPortalType({
						pId: id == undefined ? "" : id
					}).then(res => {
						if (res.data && res.data.code == 200) {
							let list = res.data.data;
							if (list && list.length) {
								list = list.map(v => {
									return {
										pid: v.parentId,
										text: v.industryName,
										value: v.industryId,
										id: v.industryId
									}
								})
								this.dataList[String(id)] = list;
								this.acList = list;
								this.acPid = id;
							}
							return res
						}
					})
				} else if (this.seltype == 'city') {
					return getPortalDistrict({
						pId: id
					}).then(res => {
						if (res.data && res.data.code == 200) {
							let list = res.data.data;
							if (list && list.length) {
								list = list.map(v => {
									return {
										pid: v.pId,
										text: v.name,
										value: v.id,
										id: v.id
									}
								})
								this.dataList[String(id)] = list;
								this.acList = list;
								this.acPid = id;
							}
							return res;
						}
					})
				}
			},
			onPropsChange() {
				this._treeData = [];
				this.selectedIndex = 0;
				this.load();
			},
			load() {
				if (this.isLocaldata) {
					this.loadData();
				} else if (this.dataValue.length) {
					this.getTreePath((res) => {
						this.loadData();
					})
				}
			},
			handleSelect(item, index) {
				this.selectedIndex = index;
				this.acList = this.dataList[String(item.pid)];
			},
			async handleNodeClick(item, index) {
				let that = this;
				let idx = that.selected.findIndex(v => {
					return v.pid === item.pid
				})
				//console.log(idx, that.selected, item)
				if (idx != -1) {
					that.selected = that.selected.slice(0, idx);
					that.$set(that.selected, idx, item);
				} else {
					if (that.selected && that.selected.length) {
						if (item.pid == that.selected[that.selected.length - 1].pid) {
							that.selected.pop();
						}
					}
					that.selected.push(item);
				}
				that.selectedIndex = that.selected.length - 1 || 0;
				that.$emit('datachange', {
					selected: that.selected,
					dataList: that.dataList,
					selectedIndex: that.selectedIndex,
					acList: that.acList,
					acPid: that.acPid
				})
				if (this.showData == false) {
					//获取下一页数据
					let res = await that.getPortalType(item.id)
					if (res.data && res.data.code == 200) {
						let list = res.data.data
						if (list && list.length == 0) {
							this.$emit('hideItem');
						}
					}
				} else {
					this.$emit('hideItem');
				}
			},
			updateData(data) {
				this._treeData = data.treeData;
				this.selected = data.selected;
				if (!this._treeData.length) {
					this.loadData();
				} else {
					this.selected = data.selected;
					this._updateBindData();
				}
			},
			onDataChange() {
				this.$emit('datachange');
			},
			onSelectedChange(node, isleaf) {
				if (isleaf) {
					this._dispatchEvent();
				}
				if (node) {
					this.$emit('nodeclick', node);
				}
			},
			_dispatchEvent() {
				this.$emit('change', this.selected.slice(0));
			}
		}
	}
</script>
<style>
	.uni-data-pickerview {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}

	.error-text {
		color: #DD524D;
	}

	.loading-cover {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, .5);
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		z-index: 1001;
	}

	.load-more {
		/* #ifndef APP-NVUE */
		margin: auto;
		/* #endif */
	}

	.error-message {
		background-color: #fff;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		padding: 15px;
		opacity: .9;
		z-index: 102;
	}

	/* #ifdef APP-NVUE */
	.selected-area {
		width: 750rpx;
	}

	/* #endif */
	.selected-list {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: nowrap;
		padding: 0 5px;
		border-bottom: 1px solid #f8f8f8;
	}

	.selected-item {
		margin-left: 10px;
		margin-right: 10px;
		padding: 12px 0;
		text-align: center;
		/* #ifndef APP-NVUE */
		white-space: nowrap;
		/* #endif */
	}

	.selected-item-text-overflow {
		width: 168px;
		/* fix nvue */
		overflow: hidden;
		/* #ifndef APP-NVUE */
		width: 6em;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		/* #endif */
	}

	.selected-item-active {
		border-bottom: 2px solid #007aff;
	}

	.selected-item-text {
		color: #007aff;
	}

	.tab-c {
		position: relative;
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		overflow: hidden;
	}

	.list {
		flex: 1;
	}

	.item {
		padding: 12px 15px;
		/* border-bottom: 1px solid #f0f0f0; */
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
	}

	.is-disabled {
		opacity: .5;
	}

	.item-text {
		/* flex: 1; */
		color: #333333;
	}

	.item-text-overflow {
		width: 280px;
		/* fix nvue */
		overflow: hidden;
		/* #ifndef APP-NVUE */
		width: 20em;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		/* #endif */
	}

	.check {
		margin-right: 5px;
		border: 2px solid #007aff;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		/* #ifndef APP-NVUE */
		transition: all 0.3s;
		/* #endif */
		transform: rotate(45deg);
	}
</style>